import { Card } from "antd";
import "../../../common/common.css";

export const PanelStringData = [
    {
        key: "1",
        label: "字符串转换",
        children: (
            <div className="centerTextLeft lodashPanel lodashWidth">
                <Card title="camelCase" className="lodashCard">
                    <p>
                        _.camelCase([string='']) <br />
                        <b>【 转换字符串string为驼峰写法 】</b>
                    </p>
                    <p>转换字符串string为驼峰写法。</p>
                    <p>返回string</p>
                </Card>
                <Card title="capitalize" className="lodashCard">
                    <p>
                        .capitalize([string='']) <br />
                        <b>【 转换字符串string首字母为大写，剩下为小写 】</b>
                    </p>
                    <p>转换字符串string首字母为大写，剩下为小写。</p>
                    <p>返回string</p>
                </Card>
                <Card title="deburr" className="lodashCard">
                    <p>
                        _.deburr([string='']) <br />
                        <b>【 转换为首字母大写其他小写 】</b>
                    </p>
                    <p>转换字符串string中拉丁语-1补充字母 和拉丁语扩展字母-A 为基本的拉丁字母，并且去除组合变音标记。</p>
                    <p>返回string</p>
                </Card>
                <Card title="kebabCase" className="lodashCard">
                    <p>
                        _.kebabCase([string='']) <br />
                        <b>【 转换字符串string为xxx-xxx形式字符串 】</b>
                    </p>
                    <p>转换字符串string为kebab case.</p>
                    <p>返回string</p>
                </Card>
                <Card title="lowerCase" className="lodashCard">
                    <p>
                        _.lowerCase([string='']) <br />
                        <b>【 转换字符串string以空格分开单词，并转换为小写 】</b>
                    </p>
                    <p>转换字符串string以空格分开单词，并转换为小写。</p>
                    <p>返回string</p>
                </Card>
                <Card title="lowerFirst" className="lodashCard">
                    <p>
                        _.lowerFirst([string='']) <br />
                        <b>【 转换字符串string的首字母为小写 】</b>
                    </p>
                    <p>转换字符串string的首字母为小写。</p>
                    <p>返回string</p>
                </Card>
                <Card title="snakeCase" className="lodashCard">
                    <p>
                        _.snakeCase([string='']) <br />
                        <b>【 转换字符串单词中间以_分隔 】</b>
                    </p>
                    <p>转换字符串string为snake case.</p>
                    <p>返回处理后的string</p>
                </Card>
                <Card title="startCase" className="lodashCard">
                    <p>
                        _.startCase([string='']) <br />
                        <b>【 转换字符串以空格分隔，每个单词首字母大写 】</b>
                    </p>
                    <p>转换 string 字符串为start case.</p>
                    <p>返回处理后的string</p>
                </Card>
                <Card title="toLower" className="lodashCard">
                    <p>
                        _.toLower([string='']) <br />
                        <b>【 字符串转小写 】</b>
                    </p>
                    <p>转换整个string字符串的字符为小写，类似String#toLowerCase。</p>
                    <p>返回string</p>
                </Card>
                <Card title="toUpper" className="lodashCard">
                    <p>
                        _.toUpper([string='']) <br />
                        <b>【 字符串转大写 】</b>
                    </p>
                    <p>转换整个string字符串的字符为大写，类似String#toUpperCase.</p>
                    <p>返回string</p>
                </Card>
                <Card title="upperCase" className="lodashCard">
                    <p>
                        _.upperCase([string='']) <br />
                        <b>【 转换字符串为大写单词，中间以空格分隔 】</b>
                    </p>
                    <p>转换字符串string为 空格 分隔的大写单词。</p>
                    <p>返回大写单词</p>
                </Card>
                <Card title="upperFirst" className="lodashCard">
                    <p>
                        _.upperFirst([string='']) <br />
                        <b>【 转换字符串string的首字母为大写 】</b>
                    </p>
                    <p>转换字符串string的首字母为大写</p>
                    <p>返回string</p>
                </Card>
            </div>
        ),
    },
    {
        key: "2",
        label: "条件检索",
        children: (
            <div className="centerTextLeft lodashPanel lodashWidth">
                <Card title="endsWith" className="lodashCard">
                    <p>
                        _.endsWith([string=''], [target], [position=string.length]) <br />
                        <b>【 从指定位置开始检索是否以指定字符串结尾 】</b>
                    </p>
                    <p>检查字符串string是否以给定的target字符串结尾。</p>
                    <p>返回boolean值</p>
                </Card>
                <Card title="startsWith" className="lodashCard">
                    <p>
                        _.startsWith([string=''], [target], [position=0]) <br />
                        <b>【 从指定位置开始，判断字符串是否以指定字符串开头 】</b>
                    </p>
                    <p>检查字符串string是否以 target 开头。</p>
                    <p>返回boolean值</p>
                </Card>
            </div>
        ),
    },
    {
        key: "3",
        label: "转义特殊字符",
        children: (
            <div className="centerTextLeft lodashPanel lodashWidth">
                <Card title="escape" className="lodashCard">
                    <p>
                        _.escape([string='']) <br />
                        <b>【 转义特殊字符 】</b>
                    </p>
                    <p>
                        转义string中的 "&", "&lt;" , "&gt;", '"', "'", 和 ES6指定 字符为HTML实体字符。注意: 不会转义其他字符。如果需要，可以使用第三方库，例如he。 虽然 "&gt;" 是对称转义的，字符如 "&gt;" 和 "/" 没有特殊的意义，所以不需要在
                        HTML 转义。 除非它们是标签的一部分，或者是不带引号的属性值。 查看Mathias Bynens's article 的文章 (under "semi-related fun fact") 了解详情 。 在 IE&lt; 9 中转义引号，因为会中断属性值或 HTML 注释，查看HTML5 Security
                        Cheatsheet 的#59,#102,#108, 和#133, 以及#133 了解详情。 当解析 HTML 时，总应该在属性值上使用引号 以减少 XSS 的可能性。
                    </p>
                    <p>返回处理后的string</p>
                </Card>
                <Card title="escapeRegExp" className="lodashCard">
                    <p>
                        _.escapeRegExp([string='']) <br />
                        <b>【 转义 RegExp 字符串中特殊的字符 】</b>
                    </p>
                    <p>转义 RegExp 字符串中特殊的字符 "^", "$", "", ".", "*", "+", "?", "(", ")", "[", "]", ", ", 和 "|" in .</p>
                    <p>返回处理后的string</p>
                </Card>
                <Card title="unescape" className="lodashCard">
                    <p>
                        _.unescape([string='']) <br />
                        <b>【 _.escape的反向版，转换string字符串为HTML 】</b>
                    </p>
                    <p>
                        _.escape的反向版。 这个方法转换string字符串中的 HTML 实体 &amp;, &lt;, &gt;, &quot;, &#39;, 和 &#96; 为对应的字符。 注意: 不会转换其他的 HTML 实体，需要转换可以使用类似 he 的第三方库。 注意: 不会转换其他的 HTML
                        实体，需要转换可以使用第三方库，类似he。
                    </p>
                    <p>返回处理后的string</p>
                </Card>
            </div>
        ),
    },
    {
        key: "4",
        label: "字符串填充/删除指定字符",
        children: (
            <div className="centerTextLeft lodashPanel lodashWidth">
                <Card title="pad" className="lodashCard">
                    <p>
                        _.pad([string=''], [length=0], [chars=' ']) <br />
                        <b>【 为指定字符串左右添加指定字符（串） 】</b>
                    </p>
                    <p>如果string字符串长度小于 length 则从左侧和右侧填充字符。 如果没法平均分配，则截断超出的长度。</p>
                    <p>返回处理后的string</p>
                </Card>
                <Card title="padEnd" className="lodashCard">
                    <p>
                        _.padEnd([string=''], [length=0], [chars=' ']) <br />
                        <b>【 字符串右侧填充指定字符（串 】</b>
                    </p>
                    <p>如果string字符串长度小于 length 则在右侧填充字符。 如果超出length长度则截断超出的部分。</p>
                    <p>返回处理后的string</p>
                </Card>
                <Card title="trim" className="lodashCard">
                    <p>
                        _.trim([string=''], [chars=whitespace]) <br />
                        <b>【 移除空字符串或者是指定字符串 】</b>
                    </p>
                    <p>从string字符串中移除前面和后面的 空格 或 指定的字符。</p>
                    <p>返回处理后的string</p>
                </Card>
                <Card title="trimEnd" className="lodashCard">
                    <p>
                        _.trimEnd([string=''], [chars=whitespace]) <br />
                        <b>【 移除字符串后的空格或者指定字符串 】</b>
                    </p>
                    <p>从string字符串中移除后面的 空格 或 指定的字符。</p>
                    <p>返回处理后的string</p>
                </Card>
                <Card title="trimStart" className="lodashCard">
                    <p>
                        _.trimStart([string=''], [chars=whitespace]) <br />
                        <b>【 移除字符串前面的空格或者指定字符串 】</b>
                    </p>
                    <p>从string字符串中移除前面的 空格 或 指定的字符。</p>
                    <p>返回处理后的string</p>
                </Card>
            </div>
        ),
    },
    {
        key: "10",
        label: "截断字符串后用指定字符代替",
        children: (
            <div className="centerTextLeft lodashPanel lodashWidth">
                <Card title="truncate">
                    <p>
                        _.truncate([string=''], [options=]) <br />
                        <b>【 截断string字符串后用指定字符代替 】</b>
                    </p>
                    <p>截断string字符串，如果字符串超出了限定的最大值。 被截断的字符串后面会以 omission 代替，omission 默认是 "..."。</p>
                    <p>返回string</p>
                </Card>
            </div>
        ),
    },
    {
        key: "11",
        label: "拆分字符串的词为数组",
        children: (
            <div className="centerTextLeft lodashPanel lodashWidth">
                <Card title="words">
                    <p>
                        _.words([string=''], [pattern]) <br />
                        <b>【 拆分字符串中的词为数组，可以自定义匹配模式 】</b>
                    </p>
                    <p>拆分字符串string中的词为数组 。</p>
                    <p>返回拆分的array</p>
                </Card>
            </div>
        ),
    },
    {
        key: "5",
        label: "字符串转换",
        children: (
            <div className="centerTextLeft lodashPanel lodashWidth">
                <Card title="parseInt">
                    <p>
                        _.parseInt(string, [radix=10]) <br />
                        <b>【 字符串转数字 】</b>
                    </p>
                    <p>转换string字符串为指定基数的整数。 如果基数是 undefined 或者 0，则radix基数默认是10，如果string字符串是16进制，则radix基数为 16。注意: 这个方法与ES5 implementation 的 parseInt是一样的。</p>
                    <p>返回number</p>
                </Card>
            </div>
        ),
    },
    {
        key: "6",
        label: "字符串重复",
        children: (
            <div className="centerTextLeft lodashPanel lodashWidth">
                <Card title="repeat">
                    <p>
                        _.repeat([string=''], [n=1]) <br />
                        <b>【 重复 N 次给定字符串 】</b>
                    </p>
                    <p>重复 N 次给定字符串。</p>
                    <p>返回处理后的string</p>
                </Card>
            </div>
        ),
    },
    {
        key: "7",
        label: "字符串替换",
        children: (
            <div className="centerTextLeft lodashPanel lodashWidth">
                <Card title="replace">
                    <p>
                        _.replace([string=''], pattern, replacement) <br />
                        <b>【 替换指定字符串 】</b>
                    </p>
                    <p>替换string字符串中匹配的pattern为给定的replacement 。注意: 这个方法基于String#replace.</p>
                    <p>返回处理后的string</p>
                </Card>
            </div>
        ),
    },

    {
        key: "8",
        label: "字符串分割",
        children: (
            <div className="centerTextLeft lodashPanel lodashWidth">
                <Card title="split">
                    <p>
                        _.split([string=''], separator, [limit]) <br />
                        <b>【 按分隔符对字符串进行分割 】</b>
                    </p>
                    <p>根据separator 拆分字符串string。注意: 这个方法基于String#split.</p>
                    <p>返回array</p>
                </Card>
            </div>
        ),
    },
    {
        key: "9",
        label: "创建预制模板",
        children: (
            <div className="centerTextLeft lodashPanel lodashWidth">
                <Card title="template">
                    <p>
                        _.template([string=''], [options=]) <br />
                        <b>【 创建编译目标函数，可以插入数据在模板中 】</b>
                    </p>
                    <p>
                        创建一个预编译模板方法，可以插入数据到模板中 "interpolate" 分隔符相应的位置。 HTML会在 "escape" 分隔符中转换为相应实体。 在 "evaluate" 分隔符中允许执行JavaScript代码。 在模板中可以自由访问变量。
                        如果设置了选项对象，则会优先覆盖_.templateSettings 的值。 注意: 在开发过程中，构建_.template可以使用sourceURLs【http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/#toc-sourceurl】， 便于调试。
                        了解更多预编译模板的信息查看lodash的自定义构建文档【https://lodash.com/custom-builds】。 了解更多 Chrome 沙箱扩展的信息查看Chrome的扩展文档【https://developer.chrome.com/extensions/sandboxingEval】。
                    </p>
                    <p>返回编译模板函数</p>
                </Card>
            </div>
        ),
    },
];
